<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MQ",
  inject: ["getNode"],

  data() {
    return {
      height: 128,
      width: 64,
      title: "MQ",
      text: "消息中间件"
    };
  },
  computed: {
    nodeStyle() {
      return {
        width: this.width + "px",
        height: this.height + "px"
      };
    }
  },
  mounted() {
    const node = (this as any).getNode();
    this.width = node.getSize().width;
    this.height = node.getSize().height;
    const _text = node.getAttrs().text?.text;
    if (_text) {
      this.text = _text;
    } else {
      node.attr("text/text", this.text);
    }
    node.on("change:attrs", ({ current }: any) => {
      if (current.text) {
        this.text = current.text.text;
      }
    });

    node.on("change:size", ({ current }: any) => {
      const { width, height } = current;
      this.width = width;
      this.height = height;
    });
  }
});
</script>

<template>
  <div class="c-mq" :style="nodeStyle">
    <svg
      t="1731204163404"
      class="c-mq__svg"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="4728"
    >
      <path
        d="M512 512m-398.222222 0a398.222222 398.222222 0 1 0 796.444444 0 398.222222 398.222222 0 1 0-796.444444 0Z"
        fill="#FF6B00"
        p-id="4729"
      ></path>
      <path
        d="M407.722667 227.555556a65.991111 65.991111 0 0 1 66.332444 65.649777c0 32.483556-23.893333 59.448889-55.182222 64.739556v89.315555c17.351111 2.901333 32.483556 12.515556 42.496 26.055112l148.252444-84.650667a65.991111 65.991111 0 0 1 63.601778-84.536889A65.991111 65.991111 0 0 1 739.555556 369.777778a65.991111 65.991111 0 0 1-66.389334 65.649778 66.56 66.56 0 0 1-53.703111-27.079112L471.210667 492.942222a64.967111 64.967111 0 0 1-2.446223 44.828445l150.698667 86.072889a66.56 66.56 0 0 1 53.703111-27.079112A65.991111 65.991111 0 0 1 739.555556 662.357333a65.991111 65.991111 0 0 1-66.389334 65.649778 65.991111 65.991111 0 0 1-63.544889-84.536889L456.760889 556.202667a66.446222 66.446222 0 0 1-37.944889 20.48v89.372444c31.402667 5.290667 55.239111 32.256 55.239111 64.739556A65.991111 65.991111 0 0 1 407.722667 796.444444 65.991111 65.991111 0 0 1 341.333333 730.794667c0-32.483556 23.893333-59.505778 55.296-64.739556v-89.315555A65.877333 65.877333 0 0 1 341.333333 512c0-32.540444 23.893333-59.505778 55.296-64.739556v-89.315555A65.877333 65.877333 0 0 1 341.333333 293.205333 65.991111 65.991111 0 0 1 407.722667 227.555556z"
        fill="#FFFFFF"
        p-id="4730"
      ></path>
    </svg>
    <div class="c-mq__content">
      <div class="c-mq__content__title">{{ title }}</div>
      <div class="c-mq__content__text">{{ text }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.c-mq {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #5f95ff;
  background-color: rgba(95, 149, 255, 0.05);
  &__svg {
    max-width: 64px;
    max-height: 64px;
  }
  &__content {
    flex: 1;
    &__title {
      font-size: 16px;
      color: #0e1215;
      font-weight: 600;
    }
    &__text {
      font-size: 12px;
      color: #6c757d;
    }
  }
}
</style>
